<template>
  <view class="message">
    <view
      v-for="item in dataList"
      :key="item.id"
      class="message-item"
      @click="handleDetail(item)"
    >
      <view class="item-title"> {{ item.title || "" }} </view>
      <view class="item-content">
        {{ item.body || "" }}
      </view>
      <view class="item-time">
        {{ formatTime(item.createtime) }}
      </view>
      <view v-if="item.is_read == 0" class="dot" />
    </view>
    <uni-load-more :status="loadMore" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      page: 1, // 页数
      total: 0, // 总条数
      loadMore: "more", // 加载状态
      dataList: [],
    };
  },
  onLoad() {
    this.getList();
  },
  onReachBottom() {
    if (this.loadMore === "more") {
      this.page++;
      this.getList();
    }
  },
  methods: {
    // 获取数据
    getList() {
      this.loadMore = "loading";
      this.$https
        .get("/notice/list", { page: this.page })
        .then((res) => {
          let list = res.data.data || [];
          this.dataList = this.page === 1 ? list : this.dataList.concat(list);
          this.total = res.data.total;
          this.changeLoadStratus();
        })
        .catch(() => {
          this.changeLoadStratus();
        });
    },
    // 改变加载状态
    changeLoadStratus() {
      if (this.dataList.length >= this.total) {
        this.loadMore = "noMore";
      } else {
        this.loadMore = "more";
      }
    },
    // 消息详情
    handleDetail(item) {
      item.is_read = 1;
      uni.navigateTo({ url: "/pages/message/detail?id=" + item.id });
    },
    // 格式化日期
    formatTime(time) {
      if (!time) return "";
      let date = new Date(time * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let i = date.getMinutes();
      i = i < 10 ? "0" + i : i;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
    },
  },
};
</script>
<style lang="scss" scoped>
.message {
  min-height: calc(100vh - 86rpx);
  padding: 28rpx 32rpx;
  &-item {
    background-color: #ffffff;
    box-shadow: 0 0 10rpx rgb(229, 239, 243);
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    color: #141414;
    position: relative;
    &:active {
      background-color: #fbfbfb;
      box-shadow: 0 0 10rpx rgb(186, 214, 224);
    }
    .dot {
      position: absolute;
      top: 14rpx;
      right: 14rpx;
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      background-color: #ff5e5e;
    }
    .item-title {
      color: #333;
      padding: 10rpx 0;
      font-size: 28rpx;
    }
    .item-content {
      color: #666;
      font-size: 26rpx;
      letter-spacing: 2rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 10rpx;
    }
    .item-time {
      text-align: right;
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>
